import React, { Component } from 'react'
import { Card} from 'antd-mobile';
import ShowStyle from './showStyleComp'
import { Stepper } from 'antd-mobile'


const ItemClassify = (props) => {

  return <li onClick={()=>{props.showType(props.data)}}>{props.data[0].av_zvalue}</li>

}

const ItemType = (props) => {
  return <li>
    <div onClick = {()=>{props.showSize(props.av_fvalue)}} >
      <div>
        {props.av_fvalue}
      </div>
      <div>
        {props.stock_tips}
      </div>
    </div>
  </li>
}

class ShowAction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: null,
      info: null,
      type: null,
      url:null,
      zhuti:null,
      norms:null
    };
  }

  renderItemClassify = () => {
    return this.state.lang &&
      Object.values(this.state.lang).map(item => <ItemClassify
        key={Object.values(item)[0].sku_id}
        data={Object.values(item)}
        showType={this.showType}
      />)
  }

    showSize = (data) => {
      this.setState({
        norms:data
      })
    }

    showType = (data) => {
      console.log('规格',data)
      
        this.setState({
          type:data,
          url:data[0].av_zpic,
          price:data[0].cprice,
          color:data[0].av_zvalue,
          size:data[0].av_fvalue,
        }) 

    }

  rendertype = () => {
    return this.state.type && 
      this.state.type.map(item => <ItemType
        key={item.sku_id}
        {...item}
        showSize = {this.showSize}
      />)
  }

  render() {
    return (
      <ShowStyle>
        <Card>
          <Card.Header
            title={<span>价格:<span style = {{color:'red'}} >{this.state.price}</span></span>}
            thumb={<img style = {{width:'1rem',height:'1rem'}} src = {this.state.url} alt="" />}
            extra={<span>您已选择：<span style = {{color:'red'}} >{this.state.color} {this.state.norms}</span></span>}
          />
          <Card.Body>
            <div className="classify">
              <p>{this.state.info&&this.state.info.zav_name}颜色</p>
              <ul>
                {this.renderItemClassify()}
              </ul>
            </div>
            <div>
              <p>{this.state.info&&this.state.info.fav_name}规格</p>
              <ul className = "type" >
                {this.rendertype()}
              </ul>
            </div>
            <div>
              <div>购买数量(最大为10)  :
                <Stepper
                  style={{ width: '30%', minWidth: '100px' }}
                  showNumber
                  max={10}
                  min={1}
                  defaultValue='1'//初始值
                />
              </div>
            </div>
          </Card.Body>
        </Card>
      </ShowStyle>
    );
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.foodsdata[0].sku) {
      var arr = []
      var obj = {}
      var arr1 = []
    }
    console.log('lzc', nextProps.foodsdata[0].sku)
    nextProps.foodsdata[0].sku.map(item => {
      arr.push(item.av_zid)
      item.flag = false
      obj[item.av_zid] = {}
    })
    const arrs = [...new Set(arr)]
    nextProps.foodsdata[0].sku.map(item => {
      arrs.map((one) => {
        if (one == item.av_zid) {
          obj[one][item.av_fvalue] = item
        }
      })
    })

    this.setState({
      lang: obj,
    }) 
    obj &&
      Object.values(obj).map((item) => {
        arr1.push(Object.values(item))
    })
    this.showType(arr1[0])
  }
}

export default ShowAction;

